<template>
  <div class="order-view">
    <div class="order-top">
        <img src="../assets/images/sreach/left.png" class="return-img" @click="$router.push({path:'/mine'})">
        我的订单
    </div>

    <div class="order-con" v-for="(d, i) in orderList" :key="i">
        <div class="item-number">订单号：{{ d.payId }}</div>
        <div class="order-item" v-for="(p, index) in d.payCart" :key="index">
            <div class="item-con">
                <img :src="p.img">
                <div class="name">{{ p.content }}</div>
            </div>

            <div class="price">
                <div>￥{{ p.price }}</div>
                <span>X {{ p.number }}</span>
            </div>
        </div>
        <div class="item-price" v-if="d.state === 1">应付款：￥<span>{{ d.payMoney }}</span></div>
        <div class="item-price" v-if="d.state !== 1">实付款：￥<span>{{ d.payMoney }}</span></div>
        <div class="item-opt">
            <button v-if="d.state === 1" @click="delOrder(d.payId)">取消订单</button>
            <button v-if="d.state === 1" @click="goPayOrder(d.payId)">去付款</button>
            <button v-if="d.state === 2" @click="confirmOrder(d.payId)">确认收货</button>
            <button v-if="d.state === 3">售后</button>
            <button v-if="d.state === 3">评价</button>
        </div>
    </div>

    <div class="order-nav">
        <div :class="{active: active === 0 }" @click="toggleOrder(0)">全部</div>
        <div :class="{active: active === 1 }" @click="toggleOrder(1)">待付款</div>
        <div :class="{active: active === 2 }" @click="toggleOrder(2)">待收货</div>
        <div :class="{active: active === 3 }" @click="toggleOrder(3)">已收货</div>
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant'
export default {
    data(){
        return{
            active: 0,
            orderList: []
        }
    },
    methods:{
        // 获取订单
        getOrderList(){
            let payCartList = JSON.parse(localStorage.payCartList || '[]')
            if(payCartList[0]){
                this.orderList = payCartList
            }
        },
        
        toggleOrder(n){
            this.active = n
            let payCartList = JSON.parse(localStorage.payCartList || '[]')
            if(payCartList[0]){
                if(this.active === 0){
                    this.orderList = payCartList
                }
                if(this.active === 1){
                    this.orderList = payCartList.filter(k => k.state == 1)
                }
                if(this.active === 2){
                    this.orderList = payCartList.filter(k => k.state == 2)
                }
                if(this.active === 3){
                    this.orderList = payCartList.filter(k => k.state == 3)
                }
            }
            
        },

        goPayOrder(id){
            this.$router.push({
                path:`/settlement/${id}`
            })
        },

        delOrder(id){
            let payCartList = JSON.parse(localStorage.payCartList || '[]')
            payCartList = [...payCartList.filter(k => k.payId != id)]
            localStorage.payCartList = JSON.stringify(payCartList)
            this.orderList = payCartList
        },

        confirmOrder(id){
            let payCartList = JSON.parse(localStorage.payCartList || '[]')
            let payCar = payCartList.filter(k => k.payId == id)[0]
            console.log(payCar);
            let payCart = {
                payId: id,
                payCart: payCar.payCart,
                payMoney: payCar.payMoney,
                payNum: payCar.goodsNum,
                payName: payCar.payName,
                payAddress: payCar.payAddress,
                payType: payCar.payType,
                state: 3    // 1 为未支付，2 为待发货，3为已收货
            }
            payCartList = [payCart, ...payCartList.filter(k => k.payId != id)]
            localStorage.payCartList = JSON.stringify(payCartList)

            this.orderList = payCartList

            Toast('已确认收货')
        }
    },
    mounted() {
        this.getOrderList()
    }
}
</script>

<style lang="scss" scoped>
.order-view{
    width: 100vw;
    min-height: 85vh;
    padding-top: 26vw;
    background-color: #f5f5f5;

    .order-top{
        color: #666666;
        width: 100vw;
        height: 13vw;
        text-align: center;
        line-height: 13vw;
        background-color: #f2f2f2;
        position: fixed;
        top: 0;
        left: 0;
        overflow: hidden;

        .return-img{
        width: 8vw;
        height: 8vw;
        position: absolute;
        left: 2vw;
        top: 2.5vw;
        }
    }

    .order-nav{
        color: #666666;
        width: 100vw;
        height: 13vw;
        text-align: center;
        line-height: 13vw;
        background-color: #fff;
        position: fixed;
        top: 13vw;
        left: 0;
        overflow: hidden;
        display: flex;
        justify-content: space-between;

        div{
            width: 33%;
            border-bottom: #f2f2f2 1px solid;

            &.active{
                color: #ff6700;
                border-bottom: #ff6700 1px solid;
            }
        }
    }

    .order-con{
        width: 100vw;
        padding: 2vw 4vw 4vw 2vw;
        box-sizing: border-box;
        margin-bottom: 3vw;
        background-color: #ffffff;
        border: #f2f2f2 1px solid;

        .item-number{
            line-height: 10vw;
            border-bottom: #ececec 1px solid;
        }
    
        .order-item{
            width: 94vw;
            height: 17vw;
            line-height: 10vw;
            display: flex;
            justify-content: space-between;
            padding: 2vw 0;
            border-bottom: #ececec dotted 1px;

            .order-item:last-of-type{
                border-bottom: none;
            }

            .item-con{
                display: flex;
                img{
                    width: 17vw;
                    height: 17vw;
                }
                
                .name{
                    width: 55vw;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    overflow: hidden;
                }
            }
        
            .price{
                font-weight: bold;
                text-align: right;
                line-height: 9vw;
                
                span{
                    display: inline-block;
                    font-size: 12px;
                    font-weight: 200;
                }
            }
        }

        .item-price{
            line-height: 10vw;
            display: flex;
            justify-content: right;
            color: #ff6700;
            border-bottom: #ececec dotted 1px;

            span{
                font-weight: bold;
            }
        }

        .item-opt{
            padding-top: 2vw;
            display: flex;
            justify-content: right;
            button{
                height: 9vw;
                margin-left: 3vw;
                padding: 0 3vw;
                border: #cccccc 1px solid;
                background-color: #f2f2f2;
                
                &:last-of-type{
                    color: #ffffff;
                    background-color: #ff6700;
                    border: #ff6700 1px solid;
                }
            }
        }
    }
}
</style>